<template>
    <div>
        <el-row style="margin-bottom:20px;">
            <el-breadcrumb separator-class="el-icon-arrow-right">
                <el-breadcrumb-item>咨询会</el-breadcrumb-item>
                <el-breadcrumb-item v-if="showPage==1">图片列表</el-breadcrumb-item>
                <el-breadcrumb-item v-if="showPage==2">新增图片</el-breadcrumb-item>
                <el-breadcrumb-item v-if="showPage==3">修改图片</el-breadcrumb-item>
            </el-breadcrumb>
        </el-row>
        <el-row v-show='showPage==1'>
            <el-row :gutter="10">
                <el-col :span='3'>
                    <el-button type="primary" size="small" @click='addImg'>新增图片</el-button>
                </el-col>
            </el-row>
            <el-row style="margin-top:20px;" :gutter='20' v-for='itemRow in table.imgList' :key='itemRow.id'>
                <el-col :span='6' v-for='item in itemRow.data' :key='item.id'>
                    <el-card :body-style="{padding: '0px'}">
                        <el-image style="width:100%; height:100%;  max-height: 400px;" :fit='imgFit' :src='item.imgUrl' :preview-src-list='[item.imgUrl]'>
                        </el-image>
                        <div style="padding: 10px;">
                            <el-row>
                                <el-col :span='8'>
                                    <el-tag size="small">序号: {{item.orderNum}}</el-tag>
                                </el-col>
                                <el-col v-if='item.indexNum > 0' :span='8' style="text-align: center;">
                                    <el-tag type="success" size="small">首页: {{item.indexNum}}</el-tag>
                                </el-col>
                                <el-col v-if='item.indexNum > 0' :span='8' style="text-align: right;" class='my-detail-button'>
                                    <el-button type="text" class="button" @click='modify(item)'>修改</el-button>
                                    <el-button type="text" class="button" @click='goDelete(item)'>删除</el-button>
                                </el-col>
                                <el-col v-if='item.indexNum == 0' :span='8' :offset='8' style="text-align: right;" class='my-detail-button'>
                                    <el-button type="text" class="button" @click='modify(item)'>修改</el-button>
                                    <el-button type="text" class="button" @click='goDelete(item)'>删除</el-button>
                                </el-col>
                            </el-row>
                        </div>
                    </el-card>
                </el-col>
            </el-row>
            <!--分页条-->
            <el-pagination style="margin-top:10px;" @current-change="currentChangeHandle" :current-page="table.currentPage"
            :page-size="table.pageSize" layout="total, prev, pager, next, jumper" :total="table.rowCount"></el-pagination>
        </el-row>
        <!-- 新增轮播图 -->
        <el-row v-show='showPage==2 || showPage==3'>
            <el-row>
                <el-col :span='3'>
                    <el-button type="primary" size='small' @click='showPage=1'>返回列表</el-button>
                </el-col>
            </el-row>
            <el-row style="margin-top:20px;">
                 <el-col :span='10'>
                        <el-form :label-position="addForm.labelPosition" label-width="200px" 
                        :model="addForm" ref='addForm' size="small" :rules="addForm.rules">
                            <el-form-item label="咨询图(570*330)" prop='imageUrl'>
                                <el-upload
                                :action="uploadImgUrl"
                                :show-file-list="false"
                                :headers="headers"
                                :on-success="handleAvatarSuccess"
                                :before-upload="beforeAvatarUpload">
                                    <img v-if="addForm.imageUrl" :src="addForm.imageUrl" style="width:570px;height:330px; border:1px solid #ffffff;"/>
                                    <img v-else src="../../assets/img/add_img.png" style="width:570px;height:330px; border:1px solid #ffffff;"/>
                            </el-upload>
                            <el-input v-model="addForm.imageUrl" v-show='false'></el-input>
                            </el-form-item>
                            <el-form-item label="标题" prop='title'>
                                <el-input style="width:570px;" v-model="addForm.title" placeholder="请输入标题"></el-input>
                            </el-form-item>
                            <el-form-item label="排序号" prop='orderNum'>
                                <el-input-number v-model="addForm.orderNum" :min="1" :max="100" :precision="0"></el-input-number>
                            </el-form-item>
                            <el-form-item>
                                <el-button type="primary" @click="submitForm('addForm')">提交</el-button>
                            </el-form-item>
                            <el-form-item>
                                <p class="el-form-item__label">序号最小1，最大100，按序号从小到大排列，前5会显示在首页上</p>
                            </el-form-item>
                        </el-form>
                 </el-col>
            </el-row>
        </el-row>
    </div>
</template>
<script>
import conf from '@/utils/conf.js'
export default {
    data() {
        return {
            showPage: 1,
            uploadImgUrl: conf.baseUrl() + '/api/img/upload',
            headers: {
                Authorization: sessionStorage.token,
                item: 'consultation',
            },
            imgFit: 'fill',
            table: {
                imgList: [],
                currentPage: 1,
                pageSize: 8,
                rowCount: 0,
            },
            addForm: {
                id: '',
                imageUrl: '',
                title: '',
                labelPosition: 'right',
                orderNum: 1,
                rules: {
                    imageUrl: [{required: true, message: '请添加轮播图', trigger: 'blur'}],
                    orderNum: [{required: true, message: '请设置排序号', trigger: 'blur'}],
                    title: [
                        {required: true, message: '请输入标题', trigger: 'blur'},
                        {
                            min: 2,
                            max: 15,
                            message: "长度2-15之间"
                        }
                    ],
                }
            }
        }
    },
    methods: {
        addImg(){
            this.addForm.id = '';
            this.addForm.imageUrl = '';
            this.addForm.title = '';
            this.addForm.orderNum = 100;
            this.showPage = 2;
        },

        modify(item){
            this.addForm.id = item.id;
            this.addForm.imageUrl = item.imgUrl;
            this.addForm.title = item.title;
            this.addForm.orderNum = item.orderNum;
            this.showPage = 3;
        },

        getTableData(){
            let p = {};
            let url = '/api/consultation/tableList';
            p.start = (this.table.currentPage - 1) * this.table.pageSize;
            p.num = this.table.pageSize;
            this.$http.fetch(url, p)
                .then(res => {
                    this.table.imgList = res.data.rows;
                    this.table.rowCount = res.data.total;
                    console.log(this.table.imgList)
                })
        },

        goDelete(item){
            this.$confirm('确定删除该咨询会图片吗?', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                        })
            .then(() => {
                let p = {};
                let url = '/api/consultation/delete';
                p.id = item.id;
                return this.$http.fetch(url, p)
            })
            .then(res => {
                this.getTableData();
            })
            .catch(() => {
                
            })
        },

        //翻页
        currentChangeHandle(currentPage) {
            this.table.currentPage = currentPage;
            this.getTableData();
        },

        submitForm(formName){
            this.$refs[formName].validate((valid)=>{
                if(valid){
                    let p = {};
                    let url;
                    // 新增
                    if(this.showPage==2){
                        url = '/api/consultation/add';
                    }else{
                        url = '/api/consultation/modify';
                        p.id = this.addForm.id;
                    }
                    p.title = this.addForm.title;
                    p.imgUrl = this.addForm.imageUrl;
                    p.orderNum = this.addForm.orderNum;
                    this.$http.fetch(url, p)
                    .then(res=>{
                        this.getTableData();
                        this.showPage = 1;
                    })
                }
            });
        },


        handleAvatarSuccess(res, file) {
            console.log(res)
            this.addForm.imageUrl = res.data.imgUrl;
        },

        beforeAvatarUpload(file) {
            const isJPG = file.type === 'image/jpeg';
            const isPNG = file.type === 'image/png';
            const isLt2M = file.size / 1024 / 1024 < 2;

            if (!(isJPG||isPNG)) {
                this.$message.error('图片只能是 JPG 或者 PNG 格式!');
            }
            if (!isLt2M) {
                this.$message.error('图片大小不能超过 2MB!');
            }
            return (isJPG||isPNG) && isLt2M;
        },
    },
    mounted(){
        this.getTableData();
    }
}
</script>

<style scoped>

.my-detail-button .el-button{
    padding: 0;
}
</style>